<template>
  <div class="item-select-wrapper">
    <el-select
      v-model="value1"
      filterable="filterable"
      remote="remote"
      clearable="clearable"
      :remote-method="doSearch"
      :loading="loading"
      :size="size"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.itemName"
        :value="item.id"
      >
        <div>{{ item.itemName }}</div>
        <div class="info">{{ item.itemNo }}</div>
      </el-option>
    </el-select>
  </div>
</template>

<script>
import { listWmsItem } from "@/api/wms/item";

export default {
  name: "ItemSelect",
  props: {
    value: {
      type: [String, Number],
      default: null,
    },
    size: {
      type: String,
      default: "small",
    },
  },
  data() {
    return {
      options: [],
      loading: false,
    };
  },
  computed: {
    value1: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit("input", v);
      },
    },
  },
  created() {
    this.doSearch();
  },
  methods: {
    doSearch(search) {
      listWmsItem({ search }, { page: 0, size: 20 }).then((res) => {
        const { content, totalElements } = res;
        this.options = content;
      });
    },
  },
};
</script>

<style lang="stylus"></style>
